<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useColumns } from "./columns";
const { ggkcColumns } = useColumns();

import { getMdStoreList } from "@/api/stock/store";

const props = defineProps({
  goodsId: {
    type: Number,
    default: 0
  },
  storeId: {
    type: Number,
    default: 0
  }
});

const form = reactive({
  businessDate: [],
  startTime: "",
  endTime: "",
  goodsId: props.goodsId,
  storeId: props.storeId,
  pageNum: 1,
  pageSize: 10
});
const total = ref(0);
const stockList = ref([]);
const onSearch = async () => {
  let newForm = { ...form };
  if (newForm.businessDate && newForm.businessDate.length > 0) {
    newForm.startTime = newForm.businessDate[0];
    newForm.endTime = newForm.businessDate[1];
  }
  delete newForm.businessDate;

  let { data } = await getMdStoreList(newForm);
  total.value = data.total;
  stockList.value = data?.records || [];
};

function handleSizeChange(val: number) {
  form.pageNum = 1;
  form.pageSize = val;
  onSearch();
}

function handleCurrentChange(val: number) {
  form.pageNum = val;
  onSearch();
}

const resetForm = () => {
  form.businessDate = [];
  form.pageNum = 1;
  form.pageSize = 10;
  onSearch();
};

onMounted(() => {
  onSearch();
});
</script>

<template>
  <div class="goods-table">
    <!-- <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="业务日期：" prop="goodsCode">
        <el-date-picker
          v-model="form.businessDate"
          class="!w-[250px]"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm()">
          重置
        </el-button>
      </el-form-item>
    </el-form> -->
    <pure-table
      row-key="id"
      align-whole="center"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      max-height="500"
      :data="stockList"
      :columns="ggkcColumns"
    />
    <!-- 分页 -->
    <div v-if="stockList.length > 0" class="mt-3 flex justify-end">
      <el-pagination
        background
        :current-page="form.pageNum"
        :page-size="form.pageSize"
        :default-page-size="10"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.goods-table {
  margin-bottom: 15px;
}
:deep(.goods-table .el-table__footer-wrapper tfoot td.el-table__cell) {
  border-top: 1px solid #efefef !important;
  background-color: #fff !important;
}
</style>
